<!--
 * @Author: wwssaabb
 * @Date: 2021-09-08 17:57:17
 * @LastEditTime: 2021-09-16 16:45:15
 * @FilePath: \gshop-client\src\components\Tabbar.vue
-->
<template>
  <Tabbar
    v-model="active"
    active-color="#02a774"
    inactive-color="#666"
    @before-change="beforeChange"
  >
    <TabbarItem
      v-for="(item, index) in tabbars"
      :icon="item.icon"
      :icon-prefix="item['icon-prefix']"
      @click="changeActive(index)"
      :key="item.name"
      :to="item.path"
      >{{ item.name }}</TabbarItem
    >
  </Tabbar>
</template>

<script setup lang="ts">
import { ref, PropType } from "vue";
import { Tabbar, TabbarItem } from "vant";
type TabbarType = {
  icon: string;
  "icon-prefix": string;
  name: string;
  path: string;
};
//active为选中的index，默认为0
const { active } = defineProps({
  active: {
    type: Number,
    default: 0,
  },
});
//tabbar渲染对象数组
const tabbars: TabbarType[] = [
  {
    icon: "take_out",
    "icon-prefix": "my-icon",
    name: "外卖",
    path: "/home",
  },
  {
    icon: "search",
    "icon-prefix": "my-icon",
    name: "搜索",
    path: "/search",
  },
  {
    icon: "order",
    "icon-prefix": "my-icon",
    name: "订单",
    path: "/order",
  },
  {
    icon: "profile",
    "icon-prefix": "my-icon",
    name: "我的",
    path: "/profile",
  },
];
const beforeChange = (val: string | number): boolean => {
  console.log("beforeChange");
  console.log(val);
  return false;
};
const changeActive = (val: number): void => {
  if (active === val) return;
};
</script>

<style lang="scss" scoped></style>
